<% if (plugins.reactions) { %>
  <section>
    <h2 class="field">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z"></path></svg>
      Overall users reactions from last <%= plugins.reactions?.comments %> comments
    </h2>
    <div class="row">
      <section>
        <% if (plugins.reactions.error) { %>
          <div class="field error">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
            <%= plugins.reactions.error.message %>
          </div>
        <% } else { %>
          <div class="row fill-width">
            <section class="categories">
              <% for (const [reaction, icon] of Object.entries({HEART:"❤️", THUMBS_UP:"👍", THUMBS_DOWN:"👎", LAUGH:"😄", CONFUSED:"😕", EYES:"👀", ROCKET:"🚀", HOORAY:"🎉"})) { const {score = 0, value:count = 0} = plugins.reactions.list[reaction] ?? {} %>
                <div class="category column">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="50" height="50" class="gauge info">
                    <circle class="gauge-base" r="53" cx="60" cy="60"></circle>
                    <% if (score > 0) { %>
                      <circle class="gauge-arc" transform="rotate(-90 60 60)" r="53" cx="60" cy="60" stroke-dasharray="<%= score * 329 %> 329"></circle>
                      <% if (plugins.reactions.twemoji) { %>
                        <metrics viewBox="0 0 70 70" x="30" y="30"><%= icon %></metrics>
                      <% } else { %>
                        <text x="60" y="60" dominant-baseline="central"><%= icon %></text>
                      <% } %>
                    <% } else { %>
                      <% if (plugins.reactions.twemoji) { %>
                        <metrics viewBox="0 0 70 70" x="30" y="30"><%= icon %></metrics>
                      <% } else { %>
                        <text x="60" y="60" dominant-baseline="central"><%= icon %></text>
                      <% } %>
                    <% } %>
                  </svg>
                  <% if (plugins.reactions.details.length) { const [primary, secondary] = plugins.reactions.details %>
                    <span class="title nowrap">
                      <% if (primary === "count") { %>
                        <%= count %>
                      <% } else if (primary === "percentage") { %>
                        <%= Math.round(score*100) %><small>%</small>
                      <% } %>
                      <% if (secondary) { %>
                        <small>
                          <% if (secondary === "count") { %>
                            (<%= count %>)
                          <% } else if (secondary === "percentage") { %>
                            (<%= Math.round(score*100) %><small>%</small>)
                          <% } %>
                        </small>
                      <% } %>
                    </span>
                  <% } %>
                </div>
              <% } %>
            </section>
          </div>
        <% } %>
      </section>
    </div>
  </section>
<% } %>